<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Accordion from "./Accordion.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import { AccordionItem } from ".";
    import { BothSide } from "../BothSide";
    import { Tag } from "../Tag";
    import { HView, View, VView } from "../View";
    import Summary from "../Table/Summary.svelte";

    const { Story } = defineMeta({
        title: "Components/Navigation/Accordion",
        component: Accordion,
        subcomponents: { AccordionItem },
        tags: ["autodocs"],
        argTypes: {
            multi: {
                description: "可展开多个",
                table: {
                    defaultValue: { summary: "false" },
                },
            },
            activeKey: {
                description: "双向绑定，当前激活的Key",
            },
        },
        args: {},
    });
    let str = $state("Name");
</script>

<Story name="Default">
    {#snippet template(args)}
        {@const centerStyle = "justify-content: center"}
        <HView class="components-layout-demo" size="450px">
            <View size="250px" style="text-align: initial; box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05)" class="layout-demo-sider">
                <Accordion
                    activeKey="a1"
                    onselect={({ name, open, openKeys }) => {
                        console.log(name, open, openKeys);
                    }}
                >
                    <AccordionItem name="a1" title="Title1">
                        {#snippet icon()}
                            <Icon icon="tabler:layout-dashboard" />
                        {/snippet}
                        content1
                    </AccordionItem>
                    <AccordionItem name="a2">
                        {#snippet icon()}
                            <Icon icon="tabler:settings" />
                        {/snippet}
                        {#snippet title()}
                            <BothSide>
                                <span>Title2</span>
                                <Tag size="small" theme="success">1234</Tag>
                            </BothSide>
                        {/snippet}
                        <p>content2</p>
                        <p>content2</p>
                        <p>content2</p>
                        <p>content2</p>
                    </AccordionItem>
                </Accordion>
            </View>
            <VView style={centerStyle}>
                <View class="layout-demo-header" size="64px" style={centerStyle} />
                <View style={centerStyle} />
                <View class="layout-demo-header" size="64px" style={centerStyle} />
            </VView>
        </HView>
    {/snippet}
</Story>

<Story name="Multi">
    {#snippet template(args)}
        {@const centerStyle = "justify-content: center"}
        <VView size="300px">
            <HView class="components-layout-demo" size="450px">
                <View size="250px" style="text-align: initial; box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05)" class="layout-demo-sider">
                    <Accordion
                        multi
                        activeKey={["a1"]}
                        onselect={({ name, open, openKeys }) => {
                            console.log(name, open, openKeys);
                        }}
                    >
                        <AccordionItem name="a1" title="Title1">
                            {#snippet icon()}
                                <Icon icon="tabler:layout-dashboard" />
                            {/snippet}
                            content1
                        </AccordionItem>
                        <AccordionItem name="a2">
                            {#snippet icon()}
                                <Icon icon="tabler:settings" />
                            {/snippet}
                            {#snippet title()}
                                <BothSide>
                                    <span>Title2</span>
                                    <Tag size="small" theme="success">1234</Tag>
                                </BothSide>
                            {/snippet}
                            <div>content2</div>
                            <div>content2</div>
                            <div>content2</div>
                            <div>content2</div>
                        </AccordionItem>
                        <AccordionItem name="a3" title="Title3">
                            {#snippet icon()}
                                <Icon icon="tabler:flag" />
                            {/snippet}
                            {#each [0, 1, 2, 3] as i}
                                <div>content3</div>
                            {/each}
                        </AccordionItem>
                    </Accordion>
                </View>
                <VView style={centerStyle}>
                    <View class="layout-demo-header" size="64px" style={centerStyle} />
                    <View style={centerStyle} />
                    <View class="layout-demo-header" size="64px" style={centerStyle} />
                </VView>
            </HView>
        </VView>
    {/snippet}
</Story>

<Story name="Flex">
    {#snippet template(args)}
        {@const centerStyle = "justify-content: center"}
        <VView size="300px">
            <HView class="components-layout-demo" size="450px">
                <View size="250px" style="text-align: initial; box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05)" class="layout-demo-sider">
                    <Accordion
                        activeKey="a1"
                        flex
                        onselect={({ name, open, openKeys }) => {
                            console.log(name, open, openKeys);
                        }}
                    >
                        <AccordionItem name="a1" title="Title1">
                            {#snippet icon()}
                                <Icon icon="tabler:layout-dashboard" />
                            {/snippet}
                            content1
                        </AccordionItem>
                        <AccordionItem name="a2">
                            {#snippet icon()}
                                <Icon icon="tabler:settings" />
                            {/snippet}
                            {#snippet title()}
                                <BothSide>
                                    <span>Title2</span>
                                    <Tag size="small" theme="success">1234</Tag>
                                </BothSide>
                            {/snippet}
                            <div>content2</div>
                            <div>content2</div>
                            <div>content2</div>
                            <div>content2</div>
                        </AccordionItem>
                        <AccordionItem name="a3" title="Title3">
                            {#snippet icon()}
                                <Icon icon="tabler:flag" />
                            {/snippet}
                            {#each [0, 1, 2, 3] as i}
                                <div>content3</div>
                            {/each}
                        </AccordionItem>
                    </Accordion>
                </View>
                <VView style={centerStyle}>
                    <View class="layout-demo-header" size="64px" style={centerStyle} />
                    <View style={centerStyle} />
                    <View class="layout-demo-header" size="64px" style={centerStyle} />
                </VView>
            </HView>
        </VView>
    {/snippet}
</Story>
